<template>
    <div class="page-box" :class="{sub: app.isHandler != 0}" v-show="app.isCollapse === 3">
        <n-breadcrumb>
            <n-breadcrumb-item>
                <span style="color: var(--main-1); font-weight: bold">{{ route.meta.title }}</span>
            </n-breadcrumb-item>
            <n-breadcrumb-item>
                <span style="color: var(--main-1); font-weight: bold">{{name}}</span>
            </n-breadcrumb-item>
        </n-breadcrumb>
    </div>
</template>

<script setup lang="ts">
import useStore from "@/store";

const route = useRoute();

const {app, web} = useStore();

const name = computed(() => {
        if (route.meta.title === '专栏') {
          return app.specialFlag === 1 ? '约会' : app.specialFlag === 2 ? '活动' :
            app.specialFlag === 3 ? '赛事' : '帮助';
        } else {
          return route.meta.title;
        }
    }
);

</script>

<style scoped>
.page-box {
    position: fixed;
    top: 0.2rem;
    left: 0.6rem;
    height: 0.8rem;
    border-radius: 0 0.5rem 0.5rem 0;
    box-shadow: 0 0 1rem var(--box-shadow);
    backdrop-filter: blur(0.25rem) saturate(150%);
    padding: 0.25rem 0.3rem 0.25rem 0.6rem;
    display: flex;
    align-items: center;
    z-index: 102;
}

.page-box.sub {
    box-shadow: none;
    background: var(--main-2);
}
</style>